<template>
  <div class="part">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>行政管理</el-breadcrumb-item>
      <el-breadcrumb-item>职位管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <div class="partsearch">
      职位查询：<el-input placeholder="请输入查询的职位" v-model="input" clearable class="input" @focus="tablejlf = false"> </el-input>
      <el-button type="primary">职位查询</el-button>
      <el-button type="success" @click="dialogFormVisible = true">新建职位</el-button>
    </div>
    <div>
      <!-- 职位展示 -->
      <el-table :data="tableData" style="width:50%">
        <el-table-column prop="Position" label="职位名称" >
        </el-table-column>
        <el-table-column prop="Positionlevel" label="职位等级权限" >
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button @click="lookpeople(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="delpart(scope.row)" type="text" size="small" class="del">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="addpart" v-show="dialogFormVisible">
        <!-- 新建职位 -->
        <div class="parttitle" style="text-align:center">新建职位</div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="职位名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="职位等级">
            <el-select v-model="form.region" placeholder="请选择职位等级">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="4" value="4"></el-option>
              <el-option label="5" value="5"></el-option>
              <el-option label="6" value="6"></el-option>
              <el-option label="7" value="7"></el-option>
              <el-option label="8" value="8"></el-option>
              <el-option label="9" value="9"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table2" v-show="tablejlf">
        <!-- 职位人员 -->
        <div class="parttitle">{{ title }}人员
          <el-button type="danger" plain size="small" class="btn" @click="tablejlf = false">关闭</el-button>
        </div>
        <el-table :data="gridData">
          <el-table-column property="UserName" label="姓名" width="100"></el-table-column>
          <el-table-column property="Sex" label="性别" width="100"></el-table-column>
          <el-table-column property="Telephone" label="电话"></el-table-column>
          <el-table-column property="Department" label="所在部门"></el-table-column>
          <el-table-column property="Position" label="职位"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button  type="text" size="small" class="del">删除</el-button>
              <el-button @click="updata(scope.row)" type="primary" size="small">权限分配</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>


</template>

<script>
export default {
  data() {
    return {
      input: '',//搜索框绑定的value
      tableData: [],//渲染数组
      datalist: [],//存放数据
      title: '',//抽屉标题
      gridData: [],//抽屉数据
      tablejlf: false,//抽屉节流阀
      dialogFormVisible: false,//新建表单节流阀
      form: {//新建表单
        name: '',
        region: '',
      },

    }
  },
  created() {
    this.getdata();
  },
  watch: {
    input: {
      immediate: true,
      handler(v) {
        this.tableData = this.datalist.filter(item => {
          return item.Position.indexOf(v) >= 0;
        })
      }
    }
  },
  methods: {
    getdata() {//初始化数据
      var that = this;
      this.$axios.get('/allposition').then(function (res) {
        that.datalist = res.data.data;
        that.tableData = that.datalist;
      })
    },
    lookpeople(v) {//查看所在职位人员
      var that = this;
      var id = v.PositionId;
      this.title = v.Position;
      this.tablejlf = true
      this.$axios.get(`/positionpeople?id=${id}`).then(function (res) {
        that.gridData = res.data.data
      })
    },
    delpart(v) {//根据id，删除职位
      var that = this;
      var id = v.PositionId
       this.$axios.get(`/positionpeople?id=${id}`).then(function (res) {
        if (res.data.data.length==0) {
          that.$axios.get(`/delposition?id=${id}`).then(function (res) {
            if (res.data.state==1) {
               alert('删除成功')
               that.getdata()
            }
          })  
        }else{
          alert(`该职位还有${res.data.data.length}位员工，不能删除`);
        }
      })
      // this.$axios.get(`/delposition?id=${id}`).then(function (res) {
      //   if (res.data.state == 1) {
      //     alert('删除成功')
      //     that.getdata()
      //   }
      // })
    },
    onSubmit() {//新建职位提交
      var name = this.form.name;
      var level = this.form.region;
      var that = this;
      this.$axios({
        method: 'post',
        url: '/addposition',
        data: {
          position: name,
          plevel: level
        }
      }).then(function (res) {
        if (res.data.state == 1) {
          alert('新建成功')
          that.getdata()
          that.form.name = '';
          that.form.region = '';
        }
      })
    },
     updata(v){//部门权限修改
      this.$router.push({
        path:'/maniger',
        query:{
         UserGH:v.UserGH,
         UserName:v.UserName,
         part:v.Department,
         position:v.Position
        }
      })
  }
  }
}
</script>

<style>
.partsearch {
  width: 100%;
  height: 40px;
  margin: 10px 0;
  text-align: left;
}

.part {
  position: relative;
}

.part .del {
  color: red;
}

/* 新建 */
.addpart {
  width: 40%;
  position: absolute;
  right: 40px;
  top: 50px;
  background: #fff;
  padding: 15px;
  text-align: left;
  border-radius: 5px;
}

.input {
  width: 180px;
}

.part .parttitle {
  height: 40px;
  line-height: 40px;
  font-weight: 600;
  text-align: left;
}

.el-button {
  margin: 0 10px;
}

.el-table {
  border-radius: 5px;
}

.table2 {
  margin: 10px 0;
  padding-bottom: 50px;
}

.table2 .btn {
  margin: 0 0px 10px 350px;
}
</style>